<template>
    <div>
      <div class="top-panel">
        <el-card>
          <el-form :model="searchForm" label-width="100px" label-position="right">
            <el-row>

              <el-col :span="5">
                <el-form-item label="活动编号">
                  <el-input
                    class="password-input"
                    v-model="searchForm.activityIdFuzzy"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="活动名称">
                  <el-input
                    class="password-input"
                    v-model="searchForm.title"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="状态">
                  <el-select
                      v-model="searchForm.status"
                      placeholder="请选择状态"
                      size="large"
                      style="width: 240px"
                    >
                      <el-option
                        v-for="item in statusArray"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" :style="{ paddingLeft: '10px',paddingTop:'4px' }">
                <el-button type="success" @click="loadDataList()"
                  >查询
                </el-button>
              </el-col>
            </el-row>

          </el-form>
        </el-card>
      </div>
      <el-card class="table-data-card">
        <template #header>
          <span>申请列表</span>
        </template>
        <Table
          ref="tableInfoRef"
          :columns="columns"
          :fetch="loadDataList"
          :dataSource="tableData"
          :options="tableOptions"
          :extHeight="tableOptions.extHeight"
        >
          <template #slotStatus="{ index, row }">
            <div class="row-op-panel">
              <Badge showType="green" text="待审核" v-if="row.status == 0"></Badge>
              <Badge showType="blue" text="已通过" v-if="row.status == 1"></Badge>
              <Badge showType="red" text="已驳回" v-if="row.status == 2"></Badge>
              <Badge showType="red" text="已撤销" v-if="row.status == 3"></Badge>
            </div>
          </template>

          <template #slotType="{ index, row }">
            <div class="row-op-panel">
              <el-tag type="primary" v-if="row.type==0">审核加入</el-tag>
            </div>
          </template>

          <template #slotFeedBack="{ index, row }">
            <div class="row-op-panel">
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="row.feedback==null?'暂无反馈信息':row.feedback"
                placement="top"
              >
              <el-tag type="danger">反馈信息</el-tag>
               </el-tooltip>
            </div>
          </template>

          <template #slotOperation="{ index, row }">
            <div
              class="row-op-panel"

            >
              <a
                v-if="row.status==0"
                class="a-link"
                href="javascript:void(0)"
                @click.prevent="cancelApply(row)"
                >撤销
                </a>
                <a
                v-else
                class="a-link"
                href="javascript:void(0)"
                style="color: rgb(170, 176, 182);"
                >撤销
                </a>

            </div>
          </template>
        </Table>
      </el-card>
    </div>
  </template>
  <script setup>
  import { getCurrentInstance, nextTick, ref } from "vue";
  const { proxy } = getCurrentInstance();

  const userInfo = ref(proxy.VueCookies.get("userInfo") || {});

  const api = {
    loadDataList: "/apply/loadMyApplyInfo",
    cancelMyApply: "/apply/cancelMyApply",
    saveReservation:"/reservationInfo/saveReservation",
  };
  const searchForm = ref({
    status:-1,
  });

  const statusArray=[
    {value:-1,label:"全部"},
    {value:0,label:"待审核"},
    {value:1,label:"已通过"},
    {value:2,label:"已驳回"},
    {value:2,label:"已撤销"},
  ];


  const tableData = ref({});
  const tableOptions = ref({
    extHeight: 125,
  });

  const columns = [

    {
      label: "志愿者编号",
      prop: "userId",
    },
    {
      label: "姓名",
      prop: "name",
    },
    {
      label: "反馈信息",
      scopedSlots: "slotFeedBack",
    },
    {
      label: "活动编号",
      prop: "activityId",
    },
    {
      label: "活动名称",
      prop: "activityName",
    },
    {
      label: "申请类型",
      scopedSlots:"slotType"
    },
    {
      label: "提交时间",
      prop: "submitTime",

    },
    {
      label: "状态",
      scopedSlots: "slotStatus",
    },

    {
      label: "操作",
      prop: "operation",
      width: 250,
      scopedSlots: "slotOperation",
    },
  ];

  const tableInfoRef = ref();

  const loadDataList = async () => {
    let params = {
      pageNo: tableData.value.pageNo,
      pageSize: tableData.value.pageSize,

    };
    Object.assign(params, searchForm.value);
    if(params.status===-1){
      delete params.status;
    }
    params.userId=userInfo.value.userId;
    let result = await proxy.Request({
      url: api.loadDataList,
      params: params,
    });
    if (!result) {
      return;
    }
    Object.assign(tableData.value, result.data);
  };



  //修改申请状态
  const cancelApply = (data) => {

    proxy.Confirm(`确定取消 【${data.activityName}】的申请吗？`, async () => {
      let result = await proxy.Request({
        url: api.cancelMyApply,
        params: {
            applyId: data.applyId,
        },
      });
      if (!result) {
        return;
      }
      proxy.Message.success("操作成功");
      loadDataList();
    });
  };


  </script>

  <style lang="scss" scoped>
  .detail-tree-panel {
    height: calc(100vh - 273px);
    overflow: auto;
    width: 100%;
  }
  </style>
